<template>
	<view class="content">
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollIntoView">
			<view class="chat-main" v-if="Object.keys(datalist).length > 0">
				<view class="invitation" v-if="uid==datalist.user_id">
					<view class="telephone" @click="telclick">
						<image src="../../../static/image/mine/telephone.png" mode=""></image>
						交换电话
					</view>
					<view @click="sendclick">
						<image src="../../../static/image/mine/send.png" mode=""></image>
						发送邀请
					</view>
				</view>
				<view class="recruit-content" @click="gotojobhunting(datalist.id)">
					<view class="chat-recruit" v-if="type=='招工订单'">
						<view class="recruit-title">
							<view>{{datalist.work_type_name}}</view>
							<view class="title-type">{{datalist.recruitment_type}}</view>
						</view>
						<view class="recruit-data">
							<view v-for="(item,index) in datalist.label" :key="index">{{item}}</view>
						</view>
						<view class="recruit-msg">
							<view style="word-break: break-all;">{{datalist.requirement}}</view>
						</view>
						<view class="recruit-img">
							<image :src="datalist.image_1920" mode=""></image>
							<view class="recruit-name">{{datalist.contacts}}</view>
						</view>
					</view>
					<view class="chat-recruit" v-else>
						<view class="recruit-title">
							<view>{{datalist.work_type_name}}</view>
							<view class="title-type" v-if="datalist.account_type=='工程企业'||datalist.account_type=='劳务企业'">企业</view>
							<view class="title-type" v-else-if="datalist.account_type=='班组长'">班组</view>
						</view>
						<view class="recruit-data">
							<view>{{datalist.number}}人</view>
							<view>{{datalist.begin_date}}至{{datalist.end_date}}</view>
						</view>
						<view class="recruit-msg" v-if="datalist.company!=''">
							<view>1.隶属单位：{{datalist.company}}</view>
							<view>2.找活工种：{{datalist.work_type_name}}</view>
						</view>
						<view class="recruit-msg" v-else>
							<view>找活工种：{{datalist.work_type_name}}</view>
						</view>
						<view class="recruit-img">
							<image :src="datalist.image_1920" mode=""></image>
							<view class="recruit-name">{{datalist.contacts}}</view>
						</view>
					</view>
					<view class="recruit-date" v-if="userInfo.uid==datalist.user_id">{{datalist.create_date}}时{{title}}向你发起沟通</view>
				</view>
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+(index+1)">
					<view class="chat-time" v-if="item.time!=''">{{changedate(item.time)}}</view>
					<view class="msg-m msg-left" v-if="item.reciver_id==uid&&item.uid==id">
						<image v-show="item.msg!=''" :src="image_1920!=''?image_1920:datalist.image_1920" mode=""></image>
						<view class="message" v-if="item.msg!=''">
							<view class="msg-text" @longpress="copyText(item.msg)">{{item.msg}}</view>
							<view class="operation" v-if="item.exc_mb==0&&uid!=datalist.user_id&&item.createshow!=0">
								<view @click="consider">再考虑一下</view>
								<view @click="confirm">可以</view>
							</view>
							<view class="operation" v-else-if="item.send_inv==0&&uid!=datalist.user_id&&item.createshow!=0">
								<view @click="consider1">再考虑一下</view>
								<view @click="willing">愿意</view>
							</view>
						</view>
						<view class="create-order" v-if="item.order==0&&item.createshow==-1">
							<view class="create-title">
								<image src="../../../static/image/mine/create-order.png"></image>
								<text>订单已创建</text>
							</view>
							<view class="create-msg">双方已协商一致，由{{datalist.contacts}}发起邀请。</view>
							<!-- <view class="create-msg">双方已协商一致，由{{userInfo.account_type}}发起邀请。</view> -->
							<view class="view-details" @click="gotodetail(0)">查看详情</view>
						</view>
						<view class="create-order" v-if="item.order==1&&item.createshow==1">
							<view class="create-title">
								<image src="../../../static/image/mine/confirm-order.png"></image>
								<text>订单已确认</text>
							</view>
							<!-- <view class="create-msg">双方已协商一致，订单已由{{datalist.work_type_name}}确认。</view> -->
							<view class="create-msg">双方已协商一致，订单已由双方确认。</view>
							<view class="view-details" @click="gotodetail(2)">查看详情</view>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.reciver_id==id&&item.uid==uid">
						<image v-show="item.msg!=''" :src="'data:image/png;base64,'+userInfo.image_128" mode=""></image>
						<view class="message" v-if="item.msg!=''">
							<!-- <text user-select="true" class="msg-text">{{item.msg}}</text> -->
							<view class="msg-text" @longpress="copyText(item.msg)">{{item.msg}}</view>
							<view class="operation" v-if="item.exc_mb==0&&uid!=datalist.user_id&&item.createshow!=0">
								<view @click="consider">再考虑一下</view>
								<view @click="confirm">可以</view>
							</view>
							<view class="operation" v-else-if="item.send_inv==0&&uid!=datalist.user_id&&item.createshow!=0">
								<view @click="consider1">再考虑一下</view>
								<view @click="willing">愿意</view>
							</view>
						</view>
						<view class="create-order" v-if="item.order==0&&item.createshow==-1">
							<view class="create-title">
								<image src="../../../static/image/mine/create-order.png"></image>
								<text>订单已创建</text>
							</view>
							<!-- <view class="create-msg">双方已协商一致，由{{userInfo.account_type}}发起邀请。</view> -->
							<view class="create-msg">双方已协商一致，由{{datalist.contacts}}发起邀请。</view>
							<view class="view-details" @click="gotodetail(0)">查看详情</view>
						</view>
						<view class="create-order" v-if="item.order==1&&item.createshow==1">
							<view class="create-title">
								<image src="../../../static/image/mine/confirm-order.png"></image>
								<text>订单已确认</text>
							</view>
							<!-- <view class="create-msg">双方已协商一致，订单已由{{datalist.work_type_name}}确认。</view> -->
							<!-- <view class="create-msg">双方已协商一致，订单已由{{title}}确认。</view> -->
							<view class="create-msg">双方已协商一致，订单已由双方确认。</view>
							<view class="view-details" @click="gotodetail(2)">查看详情</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<submit @send="send" :screen_width="screen_width"></submit>
	</view>
</template>

<script>
	import myfun from '../../../static/js/myfun.js'
	import submit from './submit.vue'
	import api from '@/static/js/api.js'
	import request from '@/static/js/request.js'
	export default{
		data(){
			return{
				msgs:[],//消息列表
				msglist:[],//深拷贝消息列表
				oldTime:new Date(),
				oldTime1:new Date(),
				scrollIntoView:'',
				i:'',
				isshow:false,//交换电话点击
				isshow1:false,//发送邀请点击
				uid:'',
				state:-1,//取数组最后一列的state  交换电话、发送邀请   -1未  0交换电话  1发送邀请
				iscreate:-1,//订单信息  -1未  0创建  1确认
				createshow:-1,//订单已创建是否显示
				// exc_mb:-1,//交换电话   -1未  0考虑  1同意
				// send_inv:-1,//发送邀请   -1未  0考虑  1同意
				// order:-1//订单信息  -1未  0创建  1确认
				chat:null,//websocket对象
				// 确保websocket是打开状态
				is_open_socket: false,
				timeout:60000,//心跳检测
				timeoutObj:null,
				userInfo:{},
				order_num:'',//订单编号
				type:'',//招工订单、找活订单
				datalist:{},
				id:'',
				recruit_id:-1,//招工详情id
				work_id:-1,//找活详情id
				accept_id:'',
				image_1920:'',
				last_date:'',//最后一条消息的时间
				title:'',//聊天对象
				screen_width:''
			}
		},
		components:{
			submit
		},
		onLoad(e){
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			//发消息 id
			this.uid = this.userInfo.uid
			if(JSON.parse(uni.getStorageSync('image_1920'))){
				this.image_1920 = JSON.parse(uni.getStorageSync('image_1920'))
			}
			this.type = e.type
			this.accept_id = Number(e.accept_id)
			if(e.title){
				this.title = e.title
			}
			if(this.type=='招工订单'){
				this.recruit_id = Number(e.id)
				this.getdata();
			}else{
				this.work_id = Number(e.id)
				this.getdata1();
			}
			// 获取系统信息
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.screen_width = res.screenWidth / 375 * 25
				}
			});
		},
		onShow(){
			setTimeout(()=>{
				// console.log(this.socketTask);
				//判断连接状态  是否连接
				// readyState,有4个状态值：
				// 1 CONNECTING:0 连接中
				// 2 OPEN:1 已连接
				// 3 CLOSING:2 关闭中
				// 4 CLOSED:3 已关闭
				if(this.socketTask&&this.socketTask.readyState!=1){
					this.socketTask = uni.connectSocket({
						url: "ws://39.99.161.175:9001/socket",
						// url: "ws://192.168.0.134:9001/socket",
						success(data) {
							console.log(data, '创建成功')
						},
						fail(err) {
							console.log(err,'创建失败');
						}
					});
					this.socketTask.onOpen((res) => {
						console.log('连接已打开', res);
						this.is_open_socket = true;
						var data = JSON.stringify({uid:this.uid,reciver_id:this.id,recruit_id:this.recruit_id,work_id:this.work_id})
						this.sendMessage(data)
						// this.start();
						this.onSocketMessage()
					});
				}
			},500)
		},
		mounted(){
			uni.$on('aa',function(){
				this.closeSocket();
				uni.request({
					url: `http://39.99.161.175:9001/close/${this.uid}`, 
					// url: `http://192.168.0.134:9001/close/${this.uid}`, 
					success: (res) => {
					},
					fail:(res)=>{
						console.log('失败');
					}
				});
			})
		},
		destroyed() {
			this.closeSocket();
			uni.request({
				url: `http://39.99.161.175:9001/close/${this.uid}`, 
				// url: `http://192.168.0.134:9001/close/${this.uid}`, 
				success: (res) => {
				},
				fail:(res)=>{
					console.log('失败');
				}
			});
		},
		methods:{
			//招工找活详情
			gotojobhunting(id){
				console.log(this.type);
				if(this.type=='招工订单'){
					uni.navigateTo({
						url: `/pages/home/Recruitment/components/recruitmentDetail?isshow=3&&id=${id}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/home/Finding/components/findingDetail?isshow=3&&id=${id}`
					})
				}
				
			},
			//招工
			getdata(){
				api.recruitmentDetails('jhj.recruitment.release','_api_recruit_detail',this.userInfo.access_token,this.userInfo.uid,this.recruit_id).then(res=>{
					this.datalist = res.data[0]
					if(this.accept_id){
						this.id = this.accept_id
					}else{
						this.id = this.datalist.user_id
					}
					uni.setNavigationBarTitle({
					    title: this.title!=''?this.title:res.data[0].contacts
					});
					this.openConnection()
				})
			},
			//找活
			getdata1(){
				api.jobDetails('jhj.work.information.release','_api_work_detail',this.userInfo.access_token,this.userInfo.uid,this.work_id).then(res=>{
					this.datalist = res.data[0]
					if(this.accept_id){
						this.id = this.accept_id
					}else{
						this.id = this.datalist.user_id
					}
					uni.setNavigationBarTitle({
					    title: this.title!=''?this.title:res.data[0].contacts
					});
					this.openConnection()
				})
			},
			telclick(){
				this.msgs.forEach(item=>{
					if(item.order=='0'||item.order=='1'){
						this.isshow = true
					}
				})
				setTimeout(()=>{
					if(!this.isshow){
						var msg;
						// if(this.type=='招工订单'){
						// 	if(this.datalist.recruitment_type=='劳务企业'||this.datalist.recruitment_type=='工程企业'){
						// 		msg = `您好，我是${this.datalist.company_name}负责人${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						// 	}else{
						// 		msg = `您好，我是${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						// 	}
						// }else{
						// 	if(this.datalist.recruitment_type=='劳务企业'||this.datalist.recruitment_type=='工程企业'){
						// 		msg = `您好，我是${this.datalist.company_name}负责人${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						// 	}else{
						// 		msg = `您好，我是${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						// 	}
						// }
						if(this.datalist.recruitment_type=='劳务企业'||this.datalist.recruitment_type=='工程企业'){
							msg = `您好，我是${this.datalist.company_name}负责人${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						}else{
							msg = `您好，我是${this.datalist.contacts}，我的联系方式：${this.datalist.contacts_method},可以给我一个您的联系方式吗？`
						}
						
						var data = {
							uid: this.uid,
							reciver_id: this.id,
							msg,
							type:'text',
							time: this.getNowFormatDate(),
							exc_mb: '0',
							send_inv: '-1',
							order: '-1',
							recruit_id:this.recruit_id,
							work_id:this.work_id,
							createshow:-1
						}
						this.msgs.push(data)
						this.sendMessage(JSON.stringify(data))
						var len = this.msgs.length;
						this.$nextTick(()=>{
							this.scrollIntoView = 'msg'+len
						})
						// this.isshow = true
					}else{
						uni.showToast({
							icon: 'none',
							title: '您已交换过电话'
						})
					}
				})
			},
			sendclick(){
				//是否可以
				var is_sure = true
				var exc_mb = ''
				this.msgs.forEach((item,index)=>{
					if(item.exc_mb == '0'){
						is_sure = false
						exc_mb = '0'
					}
					if(item.exc_mb == '1'){
						// is_sure = false
						exc_mb = '1'
					}
					if(item.order=='0'){
						this.isshow = true
					}
					if(item.order=='1'){
						this.isshow1 = true
					}
				})
				setTimeout(()=>{
					// console.log(is_sure,exc_mb,this.isshow,this.isshow1);
					var show = true
					if(is_sure&&!this.isshow&&!this.isshow1){
						uni.showToast({
							icon: 'none',
							title: '请先交换电话'
						})
					}
					if(!is_sure&&exc_mb=='0'){
						uni.showToast({
							icon: 'none',
							title: '请先接受交换电话'
						})
						show = false
					}
					// if(!this.isshow){
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请先交换电话'
					// 	})
					// }else if(!this.isshow&&!is_sure){
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请先接受交换电话'
					// 	})
					// }
					// else{
						if(this.isshow1){
							uni.showToast({
								icon: 'none',
								title: '您已发送过邀请'
							})
						}
						if(this.isshow&&!this.isshow1&&show){
							var msg;
							if(this.datalist.recruitment_type=='劳务企业'||this.datalist.recruitment_type=='工程企业'){
								msg = `您好，经过愉快的沟通，您很符合我们公司的招工要求，希望您可以尽快入职，是否愿意？`
							}else{
								msg = `您好，经过愉快的沟通，您很符合我们的招工要求，希望您可以尽快入职，是否愿意？`
							}
							var data = {
								uid: this.uid,
								reciver_id: this.id,
								msg,
								type:'text',
								time: this.getNowFormatDate(),
								exc_mb: '1',
								send_inv: '0',
								order: '-1',
								recruit_id:this.recruit_id,
								work_id:this.work_id,
								createshow:-1
							}
							this.msgs.push(data)
							this.sendMessage(JSON.stringify(data))
							var len = this.msgs.length
							this.$nextTick(()=>{
								this.scrollIntoView = 'msg'+len
							})
						}
						// else{
						// 	var msg;
						// 	if(this.datalist.recruitment_type=='劳务企业'||this.datalist.recruitment_type=='工程企业'){
						// 		msg = `您好，经过愉快的沟通，您很符合我们公司的招工要求，希望您可以尽快入职，是否愿意？`
						// 	}else{
						// 		msg = `您好，经过愉快的沟通，您很符合我们的招工要求，希望您可以尽快入职，是否愿意？`
						// 	}
						// 	var data = {
						// 		uid: this.uid,
						// 		reciver_id: this.id,
						// 		msg,
						// 		type:'text',
						// 		time: this.getNowFormatDate(),
						// 		exc_mb: '1',
						// 		send_inv: '0',
						// 		order: '-1',
						// 		recruit_id:this.recruit_id,
						// 		work_id:this.work_id,
						// 		createshow:-1
						// 	}
						// 	this.msgs.push(data)
						// 	this.sendMessage(JSON.stringify(data))
						// 	var len = this.msgs.length
						// 	this.$nextTick(()=>{
						// 		this.scrollIntoView = 'msg'+len
						// 	})
						// 	// this.isshow1 = true
						// }
					// }
				},20)
			},
			//处理时间
			changedate(date){
				return myfun.dateTime1(date)
			},
			send(e){
				let now_time = this.getNowFormatDate()
				// this.last_date = this.last_date==''?now_time:this.last_date
				var data = {
					uid: this.uid,
					reciver_id: this.id,
					// imgurl:'',
					msg:e,
					type:'text',
					time: now_time,
					// tip:len,
					exc_mb: '-1',
					send_inv: '-1',
					order: '-1',
					recruit_id:this.recruit_id,
					work_id:this.work_id,
					createshow:0
				}
				this.sendMessage(JSON.stringify(data))
				if(this.msgs.length>0){
					//发的消息与最后一条消息作比较
					var t = myfun.spaceTime(data.time,this.last_date)
					data.time = t
					console.log("t:",t);
				}
				this.last_date = now_time
				this.msgs.push(data)
				var len = this.msgs.length
				this.$nextTick(()=>{
					this.scrollIntoView = 'msg'+len
				})
			},
			gotodetail(val){
				this.msgs.forEach(item=>{
					if(item.order_num){
						this.order_num = item.order_num
					}
				})
				uni.navigateTo({
					url:`/pagesB/mine/order/orderDetails?step=${val}&&order_num=${this.order_num}`
				})
			},
			confirm(){
				var flag = true
				this.msgs.forEach(item=>{
					if(item.exc_mb=='1'){
						flag = false
						uni.showToast({
							icon: 'none',
							title: '您已点击，请勿重复点击'
						})
					}
				})
				if(flag){
					var msg = `可以，这是我的联系方式：${this.userInfo.login}`
					var data = {
						uid: this.uid,
						reciver_id: this.id,
						msg,
						type:'text',
						time: this.getNowFormatDate(),
						exc_mb: '1',
						send_inv: '-1',
						order: '-1',
						recruit_id:this.recruit_id,
						work_id:this.work_id,
						createshow:0
					}
					this.msgs.push(data)
					this.sendMessage(JSON.stringify(data))
					var len = this.msgs.length
					this.$nextTick(()=>{
						this.scrollIntoView = 'msg'+len
					})
					this.createOrder()
				}
			},
			willing(){
				var flag = true
				this.msgs.forEach(item=>{
					if(item.send_inv=='1'){
						flag = false
						uni.showToast({
							icon: 'none',
							title: '您已点击，请勿重复点击'
						})
					}
				})
				if(flag){
					var msg = `愿意`
					this.state = 1
					var data = {
						uid: this.uid,
						reciver_id: this.id,
						msg,
						type:'text',
						time: this.getNowFormatDate(),
						exc_mb: '1',
						send_inv: '1',
						order: '-1',
						recruit_id:this.recruit_id,
						work_id:this.work_id,
						createshow:0
					}
					this.msgs.push(data)
					this.sendMessage(JSON.stringify(data))
					// this.msgs[this.msgs.length-1].createshow = 1
					var len = this.msgs.length
					this.$nextTick(()=>{
						this.scrollIntoView = 'msg'+len
					})
					this.confirmOrder()
				}
			},
			consider(){
				var flag = true
				this.msgs.forEach(item=>{
					if(item.order=='0'){
						flag = false
					}
				})
				setTimeout(()=>{
					if(flag){
						var msg = `我考虑一下`
						var data = {
							uid: this.uid,
							reciver_id: this.id,
							msg,
							type:'text',
							time: this.getNowFormatDate(),
							exc_mb: '0',
							send_inv: '-1',
							order: '-1',
							recruit_id:this.recruit_id,
							work_id:this.work_id,
							createshow:0
						}
						this.msgs.push(data)
						this.sendMessage(JSON.stringify(data))
						// this.msgs[this.msgs.length-1].createshow = 0
						var len = this.msgs.length
						this.$nextTick(()=>{
							this.scrollIntoView = 'msg'+len
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '已创建订单，请勿点击。'
						})
					}
				})
			},
			consider1(){
				var flag = true
				this.msgs.forEach(item=>{
					if(item.order=='1'){
						flag = false
					}
				})
				setTimeout(()=>{
					if(flag){
						var msg = `我考虑一下`
						var data = {
							uid: this.uid,
							reciver_id: this.id,
							msg,
							type:'text',
							time: this.getNowFormatDate(),
							exc_mb: '1',
							send_inv: '0',
							order: '0',
							recruit_id:this.recruit_id,
							work_id:this.work_id,
							createshow:0
						}
						this.msgs.push(data)
						this.sendMessage(JSON.stringify(data))
						// this.msgs[this.msgs.length-1].createshow = 0
						var len = this.msgs.length
						this.$nextTick(()=>{
							this.scrollIntoView = 'msg'+len
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '已完成订单，请勿点击。'
						})
					}
				})
			},
			//获取时间
			getNowFormatDate() {
				let dateTime
				let yy = new Date().getFullYear()
				let mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1):(new Date().getMonth() + 1)
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate():new Date().getDate()
				let hh = new Date().getHours() < 10 ? '0' + new Date().getHours():new Date().getHours()
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes():new Date().getMinutes()
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds()
				dateTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
				return dateTime
			},
			//处理时间
			processingTime(time){
				var t = time.replace(/-/g, "/")
				return t
			},
			//加8小时
			setDateTime(fnTime) {
				var x = fnTime; // 取得时间"2017-07-08 13:00:00"
				var time = new Date(x);
				var timeNum = 8;//小时数
				time.setHours(time.getHours() + timeNum);
				return time;
			},
			//创建订单
			createOrder(){
				//发布人
				var publisher = this.datalist.user_id
				//接收人
				var receiver;
				if(publisher==this.uid){
					receiver = this.id
				}else{
					receiver = this.uid
				}
				var city_name
				if(this.datalist.state_name == this.datalist.city_name){
					city_name = this.datalist.city_name
				}else{
					city_name = this.datalist.state_name + this.datalist.city_name
				}
				if(this.type=='招工订单'){
					api.createOrder('jhj.release.order.info','_api_order_info_create',this.userInfo.access_token,this.type,
					this.datalist.work_type_name,city_name,publisher,receiver,this.recruit_id,'').then(res=>{
						this.order_num = res.order_num
						var data = {
							uid: this.uid,
							reciver_id: this.id,
							msg: '',
							type:'text',
							time: this.getNowFormatDate(),
							exc_mb: '1',
							send_inv: '-1',
							order: '0',
							recruit_id:this.recruit_id,
							work_id:this.work_id,
							createshow:-1,
							order_num:this.order_num
						}
						this.msgs.push(data)
						this.sendMessage(JSON.stringify(data))
						var len = this.msgs.length
						this.$nextTick(()=>{
							this.scrollIntoView = 'msg'+len
						})
					})
				}else{
					api.createOrder('jhj.release.order.info','_api_order_info_create',this.userInfo.access_token,this.type,
					this.datalist.work_type_name,city_name,publisher,receiver,'',this.work_id).then(res=>{
						this.order_num = res.order_num
						var data = {
							uid: this.uid,
							reciver_id: this.id,
							msg: '',
							type:'text',
							time: this.getNowFormatDate(),
							exc_mb: '1',
							send_inv: '-1',
							order: '0',
							recruit_id:this.recruit_id,
							work_id:this.work_id,
							createshow:-1,
							order_num:this.order_num
						}
						this.msgs.push(data)
						this.sendMessage(JSON.stringify(data))
						var len = this.msgs.length
						this.$nextTick(()=>{
							this.scrollIntoView = 'msg'+len
						})
					})
				}
			},
			//确认订单
			confirmOrder(){
				var data = {
					uid: this.uid,
					reciver_id: this.id,
					msg:'',
					type:'text',
					time: this.getNowFormatDate(),
					exc_mb: '1',
					send_inv: '1',
					order: '1',
					recruit_id:this.recruit_id,
					work_id:this.work_id,
					createshow:1
				}
				this.msgs.push(data)
				this.sendMessage(JSON.stringify(data))
				var len = this.msgs.length
				this.$nextTick(()=>{
					this.scrollIntoView = 'msg'+len
				})
				this.msgs.forEach(item=>{
					if(item.order_num){
						this.order_num = item.order_num
					}
				})
				api.confirmOrder('jhj.release.order.info','_api_order_info_confirm',this.userInfo.access_token,this.datalist.user_id,this.order_num,1).then(res=>{
					
				})
			},
			// 打开连接
			openConnection () { 
				var that = this
				this.socketTask = uni.connectSocket({
					url: "ws://39.99.161.175:9001/socket",
					// url: "ws://192.168.0.134:9001/socket",
					success(data) {
						console.log(data, '创建成功')
					},
					fail(err) {
						console.log(err,'创建失败');
					}
				});
				this.socketTask.onOpen((res) => {
				// uni.onSocketOpen((res) => {
					console.log('连接已打开', res);
					this.is_open_socket = true;
					var data = JSON.stringify({uid:this.uid,reciver_id:this.id,recruit_id:this.recruit_id,work_id:this.work_id})
					this.sendMessage(data)
					// this.start();
					this.onSocketMessage()
				});
			},
			//关闭
			closeSocket() {
				var that = this;
				this.socketTask.close({
					success(res) {
						that.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			//发送
			sendMessage(data){
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data,
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},
			//监听返回的信息
			onSocketMessage (){
				this.timeout = 60000;
				this.timeoutObj = null;
				var that = this;
				this.socketTask.onMessage((res) => {
					if(JSON.parse(res.data) && JSON.parse(res.data).length>0){
						var test_msg = JSON.parse(res.data).flat()
						var new_arr = []
						test_msg.forEach((item,index)=>{
							item = item.replace(/\'/g, "\"")
							JSON.parse(item).msg = JSON.parse(item).msg.replace(/\↵/g, "\n")
							new_arr.push(JSON.parse(item))
						})
						console.log("new_arr:",new_arr);
						console.log("that.msgs:",that.msgs);
						//判断4个id
						if(that.msgs.length>0 &&new_arr[0].uid==that.msgs[0].uid&&new_arr[0].reciver_id==that.msgs[0].reciver_id &&new_arr[0].work_id==that.msgs[0].work_id &&new_arr[0].recruit_id==that.msgs[0].recruit_id){
								console.log('重新进入回话');
						}else{
							var msgs = []
							var datalist = JSON.parse(res.data).flat()
							datalist.forEach((item,index)=>{
								item = item.replace(/\'/g, "\"")
								JSON.parse(item).msg = JSON.parse(item).msg.replace(/\↵/g, "\n")
								that.msgs.push(JSON.parse(item))
							})
							var msgs = that.msgs
							that.last_date = msgs[msgs.length-1].time
							var first_time = msgs[0].time
							that.oldTime = msgs[0].time
							var t
							msgs.forEach((item,i)=>{
								// t = myfun.spaceTime(that.oldTime,item.time)
								t = myfun.spaceTime(item.time,that.oldTime)
								if(t){
									that.oldTime = t
								}
								item.time = t
							})
							that.msgs[0].time = first_time
						}
					}
					// test_msg.forEach((item,index)=>{
					// 	item = item.replace(/\'/g, "\"")
					// 	JSON.parse(item).msg = JSON.parse(item).msg.replace(/\↵/g, "\n")
					// })
					// if(JSON.stringify(that.msgs) === JSON.stringify(test_msg)){
					// 	console.log('重新进入回话');
					// }else{
						
					// }
					// if(JSON.parse(res.data) && JSON.parse(res.data).length>0){
					// 	var datalist = JSON.parse(res.data).flat()
					// 	var msgs = []
					// 	datalist.forEach((item,index)=>{
					// 		item = item.replace(/\'/g, "\"")
					// 		JSON.parse(item).msg = JSON.parse(item).msg.replace(/\↵/g, "\n")
					// 		that.msgs.push(JSON.parse(item))
					// 	})
					// 	var msgs = that.msgs
					// 	that.last_date = msgs[msgs.length-1].time
					// 	var first_time = msgs[0].time
					// 	that.oldTime = msgs[0].time
					// 	var t
					// 	msgs.forEach((item,i)=>{
					// 		// t = myfun.spaceTime(that.oldTime,item.time)
					// 		t = myfun.spaceTime(item.time,that.oldTime)
					// 		if(t){
					// 			that.oldTime = t
					// 		}
					// 		item.time = t
					// 	})
					// 	that.msgs[0].time = first_time
					// }
					if(JSON.parse(res.data).reciver_id==that.uid && that.msgs[0].recruit_id == JSON.parse(res.data).recruit_id && that.msgs[0].work_id==JSON.parse(res.data).work_id){
						var received_msg = JSON.parse(res.data)
						var last_date = received_msg.time
						if(that.msgs.length>1){
							//接受的消息与最后一条消息作比较
							var t = myfun.spaceTime(received_msg.time,that.last_date)
							received_msg.time = t
						}
						that.last_date = last_date
						that.msgs.push(received_msg)
					}
					var len = that.msgs.length
					that.$nextTick(()=>{
						that.scrollIntoView = 'msg'+len
					})
					// 检测心跳reset,防止长时间连接导致连接关闭
					// that.reset()
				});
			},
			// 检测心跳reset
			reset () {
				clearInterval(this.timeoutObj);
				this.start(); // 启动心跳
			},
			// 启动心跳 start 
			start () {
				let self = this;
				this.timeoutObj = setInterval(function(){
					self.socketTask.send({
						data: '',
						success: (res) => {
							console.log('连接中....');
						},
						fail: (err) => {
							console.log('连接失败重新连接....');
							self.openConnection();
						}
					});
				}, this.timeout);
			},
			//复制
			copyText(val) {
				uni.setClipboardData({
					data:val,
					success() {
						uni.hideToast();
						uni.showToast({
							icon:'none',
							title:'已复制',
							duration: 1000
					  })
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		background: #F4F6F8;
		height: 100vh;
	}
	.chat{
		// height: 100%;
		height: calc(100vh - 110rpx);
		background: #F4F6F8;
		.chat-main{
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			.invitation{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-bottom: 24rpx;
				view{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 28rpx;
						height: 28rpx;
						margin-right: 18rpx;
					}
				}
				.telephone{
					border-right: 2rpx solid #D8D8D8;
				}
			}
			.recruit-content{
				background: #fff;
				.chat-recruit{
					border-radius: 10rpx;
					color: #666666;
					font-size: 26rpx;
					padding: 20rpx 30rpx;
					.recruit-title{
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.title-type{
							// width: 80rpx;
							// height: 30rpx;
							background: #0BC3E4;
							border-radius: 24rpx;
							color: #fff;
							padding: 2.5rpx 14rpx;
							font-size: 26rpx;
							text-align: center;
							line-height: 30rpx;
							margin-left: 10rpx;
						}
					}
					.recruit-data{
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						view{
							margin-right: 12rpx;
							background: #F4F6F8;
							font-size: 26rpx;
							padding: 5rpx 14rpx;
						}
					}
					.recruit-msg{
						font-size: 26rpx;
						line-height: 46rpx;
						margin-top: 14rpx;
					}
					.recruit-img{
						margin-top: 15rpx;
						display: flex;
						align-items: center;
						image{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
						}
						.recruit-name{
							margin-left: 9rpx;
						}
					}
				}
				.recruit-date{
					font-size: 24rpx;
					color: #999999;
					padding: 15rpx 30rpx;
					border-top: 2rpx solid #E8E9EE;
				}
			}
			.exchange-telephone{
				width: 500rpx;
				padding: 20rpx 20rpx 0;
				background: #FF4E61;
				margin-top: 24rpx;
				color: #fff;
				.tel-content{
					font-size: 30rpx;
					color: #333333;
				}
				.operation{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-top: 2rpx solid #D8D8D8;
					margin-top: 24rpx;
					view{
						flex:1;
						text-align: center;
					}
					view:first-child{
						color: #999999;
						border-right: 2rpx solid #D8D8D8;
					}
					view:last-child{
						color: #FF4E61;
					}
				}
			}
			.chat-ls{
				.chat-time{
					text-align: center;
					font-size: 24rpx;
					color: #999999;
					padding-top: 24rpx;
				}
				.msg-m{
					display: flex;
					margin-top: 24rpx;
					>image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.message{
						max-width: 480rpx;
						background: #fff;
						padding: 20rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #333333;
						.msg-text{
							max-width: 480rpx;
							word-break: break-all;
							white-space: pre-wrap;
						}
					}
				}
				.msg-left{
					image{
						margin-right: 15rpx;
					}
				}
				.msg-right{
					flex-direction: row-reverse;
					.message{
						color: #fff;
						background: #FF4E61;
					}
					image{
						margin-left: 15rpx;
					}
				}
				.operation{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-top: 2rpx solid #D8D8D8;
					margin-top: 24rpx;
					view{
						flex:1;
						text-align: center;
					}
					view:first-child{
						color: #999999;
						border-right: 2rpx solid #D8D8D8;
					}
					view:last-child{
						color: #FF4E61;
					}
				}
				.create-order{
					width: 500rpx;
					padding: 24rpx 24rpx 0;
					background: #fff;
					margin-top: 24rpx;
					margin-left: auto;
					margin-right: auto;
					.create-title{
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							height: 38rpx;
						}
						text{
							margin-left: 15rpx;
						}
					}
					.create-msg{
						font-size: 26rpx;
						color: #666666;
						margin-top: 16rpx;
					}
					.view-details{
						text-align: center;
						font-size: 24rpx;
						color: #E92231;
						margin-top: 18rpx;
						height: 72rpx;
						border-top: 2rpx solid #E8E9EE;
						line-height: 72rpx;
					}
				}
			}
			.create-order{
				width: 500rpx;
				padding: 24rpx 24rpx 0;
				background: #fff;
				margin-top: 24rpx;
				margin-left: auto;
				margin-right: auto;
				.create-title{
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 38rpx;
					}
					text{
						margin-left: 15rpx;
					}
				}
				.create-msg{
					font-size: 26rpx;
					color: #666666;
					margin-top: 16rpx;
				}
				.view-details{
					text-align: center;
					font-size: 24rpx;
					color: #E92231;
					margin-top: 18rpx;
					height: 72rpx;
					border-top: 2rpx solid #E8E9EE;
					line-height: 72rpx;
				}
			}
		}
	}
</style>
